import React, { useState, useEffect, useMemo } from "react";

export const UseMomeComp = () => {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  // 传入 getter 方法； 当关联的 state 发生改变时，会重新调用 getter 计算结果
  const calcCount = useMemo(() => {
    console.log("计算结果", count1);
    return count1 * 10;
  }, [count1]); // 修改 count1 的值， calcCount 的值会重新计算

  useEffect(() => {
    // 这里 UI 层已经更新完成了
    // const { count1, count2 } = preState.current;
    console.log("-----------------");
  });

  return (
    <div>
      <p>test: {count1}</p>
      <p>test: {count2}</p>
      <p>calcCount: {calcCount}</p>
      <button
        onClick={() => {
          let i = count1;
          setCount1(++i);
        }}
      >
        click me 1
      </button>
      <button
        onClick={() => {
          let i = count2;
          setCount2(++i);
        }}
      >
        click me 2
      </button>
    </div>
  );
};
